<template>
  <div class="nav">
    <div class="nav-title">
      <div class="nav-title__ward">全科病区</div>
      <div class="nav-title__sickbed">
        共有病床06张 (使用1张，空<span class="nav-title__emptybed">5</span>张)
      </div>
    </div>
    <div class="nav__time">{{ dataTime | formatDate('YY-mm-dd HH:MM') }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataTime: new Date(),
      dateTimeTimer: null
    }
  },

  created () {
    this.dateTimeTimer = setInterval(() => {
      this.dataTime = new Date()
    }, 60000)
  },
  
  beforeDestroy () {
    clearInterval(this.dateTimeTimer)
  }
}
</script>

<style lang="scss" scoped>
.nav {
  background: #388FFB;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 28px 56px;
  &-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    &__ward {
      font-size: 36px;
      font-weight: 500;
      margin-right: 24px;
    }
    &__sickbed {
      font-size: 32px;
      font-weight: 400;
    }
    &__emptybed {
      color: #FF8900;
    }
  }
  &__time {
    font-size: 36px;
    font-weight: 500;
  }
}
</style>